<template>
  <page-view :title="title" subTitle="维护部门数据">

    <a-form slot="headerContent" layout="inline">
      <a-form-item :wrapper-col="{ span: 24 }" style="width: 30%;">
        <a-input placeholder="部门名称" v-model="key" @change="handleSearchChange"/>
      </a-form-item>
    </a-form>

    <a-row slot="extra" class="status-list">
      <a-col :xs="24" :sm="24">
        <div class="text">部门数</div>
        <div class="heading">{{ total }}</div>
      </a-col>
    </a-row>

    <template slot="action">
      <a-button type="primary" @click="handleClickCreateRootDept">新增部门</a-button>
    </template>

    <a-card :bordered="false">
      <a-table
        default-expand-all-rows
        rowKey="id"
        :columns="columns"
        :dataSource="data"
        :pagination="false">
        <span slot="nameTitle">
          <a-popover title="查看客户的下级客户">
            <template slot="content">
              <p>下面点击+号展开能看到部门的下级部门</p>
            </template>
            <a>部门名称<a-icon style="margin-left: 15px;" type="question-circle"/></a>
          </a-popover>
        </span>
        <span slot="name" slot-scope="value">
          <highlight-text :text="value" :keyword="key"></highlight-text>
        </span>
        <span slot="action" slot-scope="text, row">
          <a @click.prevent="handleClickCreateSubDept(row)">新增子部门</a>
          <a-divider type="vertical"/>
          <a @click.prevent="handleClickUpdateDept(row)">编辑</a>
          <a-divider type="vertical"/>
          <a @click.prevent="handleClickDeleteDept(row)">删除</a>
        </span>
      </a-table>

    </a-card>

    <create-dept-dialog ref="createRootDeptDialog"
                        create-root-dept
                        @success="handleCreateRootDeptSuccess"></create-dept-dialog>

    <create-dept-dialog ref="createSubDeptDialog"
                        @success="handleCreateSubDeptSuccess"></create-dept-dialog>

    <edit-dept-dialog ref="editDeptDialog"
                      @success="handleEditDeptSuccess"></edit-dept-dialog>

  </page-view>
</template>

<script>

  import {PageView} from '@/layouts'
  import {findNodeInTree, listToTree} from '@/utils/tree'
  import {deleteDept, findDepts} from '@/api/dept'
  import {debounce} from 'lodash'
  import HighlightText from '@/components/HighlightText'
  import CreateDeptDialog from './CreateDeptDialog'
  import EditDeptDialog from './EditDeptDialog'

  const columns = [{
    dataIndex: 'name',
    key: 'name',
    slots: {title: 'nameTitle'},
    scopedSlots: {customRender: 'name'}
  }, {
    title: '操作',
    key: 'action',
    scopedSlots: {customRender: 'action'}
  }]

  export default {

    name: 'DeptManageView',

    components: {
      PageView,
      HighlightText,
      CreateDeptDialog,
      EditDeptDialog
    },

    data() {
      return {
        columns,
        key: '',
        data: [],
        total: 0
      }
    },

    computed: {
      title() {
        return this.$route.meta.title
      }
    },

    created() {
      this.queryData()
    },

    mounted() {
      this.handleSearchChange = debounce(this.handleSearchChange, 500)
    },

    methods: {
      queryData() {
        const key = this.key
        findDepts(key).then(resp => {
          let list = resp.result.list
          this.total = list.length
          this.data = listToTree(list)
        })
      },

      handleSearchChange() {
        this.queryData()
      },

      handleClickCreateRootDept() {
        this.$refs.createRootDeptDialog.open()
      },

      handleCreateRootDeptSuccess(newRow) {
        this.data.push(newRow)
        this.total += 1
        this.$message.success('新增顶级部门成功')
      },

      handleClickCreateSubDept(row) {
        this.$refs.createSubDeptDialog.open(row)
      },

      handleCreateSubDeptSuccess(newRow) {
        let parentNode = findNodeInTree(this.data, newRow.parent)
        if (parentNode !== undefined) {
          parentNode.children.push(newRow)
        }
        this.total += 1
        this.$message.success('新增子部门成功')
      },

      handleClickUpdateDept(row) {
        this.$refs.editDeptDialog.open(row)
      },

      handleEditDeptSuccess(newRow) {
        // 确定节点所有的数组
        let arr = this.data
        if (newRow.parent !== 0) {
          let parentNode = findNodeInTree(this.data, newRow.parent)
          if (parentNode !== undefined) {
            arr = parentNode.children
          }
        }
        //更新
        const idx = arr.findIndex(e => e.id === newRow.id)
        if (idx !== -1) {
          let node = arr[idx]
          node.name = newRow.name
          arr.splice(idx, 1, node)
        }
        this.$message.success('更新部门成功')
      },

      handleClickDeleteDept(row) {
        if (row.children && row.children.length > 0) {
          this.$message.warning('该部门下有下级部门，无法删除该部门')
          return false
        }
        deleteDept(row.id).then(() => {
          // 确定节点所有的数组
          let arr = this.data
          if (row.parent !== 0) {
            let parentNode = findNodeInTree(this.data, row.parent)
            if (parentNode !== undefined) {
              arr = parentNode.children
            }
          }
          //删除
          const idx = arr.findIndex(e => e.id === row.id)
          if (idx !== -1) {
            arr.splice(idx, 1)
          }
          this.total -= 1
          this.$message.success('删除部门成功')
        })
      },


    }

  }
</script>

<style lang="less" scoped>
  .title {
    color: rgba(0, 0, 0, .85);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
  }

  .text {
    color: rgba(0, 0, 0, .45);
  }

  .heading {
    color: rgba(0, 0, 0, .85);
    font-size: 20px;
  }
</style>
